<template>
	<view>
		<view class="m-hotel" v-if="detail.hotal">
			<view class="m-hotel-title">
				<text>{{detail.hotal.title}}</text>
			</view>
			<view class="m-hotel-bottom">
				<view class="m-hotel-left">
					<text>{{get_date('MM月DD日',detail.startTime)}} 至 {{get_date('MM月DD日',detail.endTime)}} {{detail.night_num}}晚 {{detail.home_json.title}} {{detail.num}}间</text>
				</view>
				<view class="m-hotel-right">
					<text>{{detail.price || 0}}</text>
				</view>
			</view>
		</view>
		
		<view class="m-card-h3 u-m-t-20">
			<text>酒店点评</text>
		</view>
		<view class="m-cell">
			<view class="m-cell-left">
				<text>综合：</text>
			</view>
			<u-rate :count="5" :minCount="1" v-model="params.pingjia_star"></u-rate>
		</view>
		<view class="m-cell">
			<view class="m-cell-left">
				<text>位置：</text>
			</view>
			<u-rate :count="5" :minCount="1" v-model="params.weizhi_star"></u-rate>
		</view>
		<view class="m-cell">
			<view class="m-cell-left">
				<text>环境：</text>
			</view>
			<u-rate :count="5" :minCount="1" v-model="params.huanjing_star"></u-rate>
		</view>
		<view class="m-cell">
			<view class="m-cell-left">
				<text>卫生：</text>
			</view>
			<u-rate :count="5" :minCount="1" v-model="params.weisheng_star"></u-rate>
		</view>
		<view class="m-cell">
			<view class="m-cell-left">
				<text>设施：</text>
			</view>
			<u-rate :count="5" :minCount="1" v-model="params.sheshi_star"></u-rate>
		</view>
		<view class="m-text-view">
			<textarea v-model="params.content" value="" placeholder="写出您的评价，可以帮助更多小伙伴哦~" />
		</view>
		<view class="m-img-list u-p-t-20">
			<view class="m-img-item" v-for="(item,index) in list">
				<view class="img_del" @click="del_img(index)">
					<u-icon name="close-circle-fill"></u-icon>
				</view>
				<image :src="item" mode="aspectFill"></image>
			</view>
			<view class="m-img-item-upload" @click="select_img">
				<u-icon name="plus"></u-icon>
			</view>
		</view>
		
		<view class="m-bottom-view-empty"></view>
		<view class="m-bottom-view safe-area-inset-bottom" @click="submit">
			<text>提交评价</text>
		</view>
	</view>
</template>

<script>
	import {to_back,msg} from "@/common/function/system_fun.js"
	import {setOrderEvalFun} from "@/common/function/api_fun.js"
	import {
		getScoreText,
		get_timestamp,
		get_date,
		replaceText
	} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				detail:{},
				list:[],
				params:{
					content:'',
					image:'',//逗号隔开
					pingjia_star:5,
					weizhi_star:5,
					huanjing_star:5,
					weisheng_star:5,
					sheshi_star:5,
				},
				text_count:0
			}
		},
		computed: {
			getCountComputed() {
				return (item) => {
					let start = get_timestamp(item.startTime)
					let end = get_timestamp(item.endTime)
					let count = (end - start) / 24 / 60 / 60
					return count
				}
			}
		},
		onLoad(options) {

			this.ordersId = options.id
			this.getOrdersInfo()

		},
		methods: {
			get_date,
			del_img(index){
				this.list.splice(index,1)
			},
			select_img(){
				if(this.list.length >= 6){
					this.$m.msg('仅限上传6张')
					return false;
				}
				uni.chooseImage({
				    count: 1, 
				    sizeType: ['compressed'],
				    sourceType: ['album','camera'], 
				    success:(res)=> {
						this.$http.getUpload('index_ossupload', res.tempFilePaths[0],{}, 'file').then((res) => {
							if (res.code == 1) {
								this.list.push(res.data)
							} else {
								this.$m.msg(res.msg)
							}
						})
				    }
				});
			},
			getOrdersInfo() {
				this.$http.getJson('hotal_orderInfo', {
					id: this.ordersId
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					} else {
						this.$m.msg(res.message, () => {
							this.to_back()
						})
					}
				})
			},
			submit(){
				let params = this.params
				if(!params.content){
					this.$m.msg('评论内容不能为空')
					return false
				}

				this.$http.getJson('hotal_comment',{
					...params,
					image:this.list.join('|'),
					id:this.ordersId
				}).then(res=>{
					if(res.code == 1){
						this.$m.msg('评价成功',()=>{
							this.to_back()
						})
					}else{
						this.$m.msg(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
	}
	
	.m-hotel{
		padding: 30rpx 25rpx;
		background: #fff;
		.m-hotel-title{
			font-size: 32rpx;
			color: #33302D;
			line-height: 45rpx;
			font-weight: 800;
		}
		.m-hotel-bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.m-hotel-left{
				font-size: 24rpx;
				color: #9B958F;
				width:550rpx;
			}
			.m-hotel-right{
				font-size: 40rpx;
				color: #DE2C38;
				&::before{
					content: '￥';
					font-size: 24rpx;
				}
			}
		}
	}
	
	
	.m-card-h3{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 40rpx;
		color: #33302D;
		padding: 30rpx 25rpx 20rpx;
		background: #fff;
	}
	
	.m-cell{
		display: flex;
		align-items: center;
		background: #fff;
		padding: 0 0 30rpx 25rpx;
	}
	
	.m-star-list{
		display: flex;
		background: #fff;
		padding: 10rpx 20rpx;
		.m-star-item{
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.m-text-view{
		width: 750rpx;
		height: 280rpx;
		background: #FFFFFF;
		padding: 0 25rpx;
		textarea{
			width: 100%;
			height: 100%;
			padding: 30rpx 25rpx;
			background: #F6F6F6;
			border-radius: 12rpx;
			box-sizing: border-box;
		}
	}
	
	.m-img-list{
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		padding-bottom: 60rpx;
		.m-img-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 150rpx;
			height: 150rpx;
			border-radius: 12rpx;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
		.img_del{
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			top: 0rpx;
			right: 0rpx;
			font-size: 40rpx;
		}
		.m-img-item-upload{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 150rpx;
			height: 150rpx;
			border-radius: 12rpx;
			margin-left: 20rpx;
			background: #f5f5f5;
			font-size: 48rpx;
			color: #999;
		}
	}
	
	.m-bottom-view-empty{
		width:100%;
		height: 300rpx;
	}
	.m-bottom-view{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 750rpx;
		text{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 710rpx;
			height: 100rpx;
			background: #D3A358;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			color: #fff;
		}
	}
</style>
